<template>
  <div class="editInfo">
    <van-nav-bar :title="title">
      <template #left>
        <i @click="$router.go(-1)" class="iconfont iconbtn_nav_back myicon"></i>
      </template>
      <template #right>
        <span @click="save" v-if="isShow === true">保存</span>
      </template>
    </van-nav-bar>
    <!-- ------ -->

    <div class="editBox">
      <!-- 修改头像 -->
      <div v-if="ed === 'avatar'">
        <van-uploader
          v-model="fileList"
          :after-read="afterRead"
          :max-count="1"
          preview-size="200"
        />
      </div>
      <!-- 修改资料 -->
      <van-field
        v-else
        v-model="message"
        rows="1"
        autosize
        type="textarea"
        @input="isShow = true"
        maxlength="10"
        show-word-limit
      />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

import { apiEditInfo, apiUpload } from '@/api/au.js'
export default {
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  data () {
    return {
      message: '',
      title: '',
      ed: this.$route.query.ed,
      isShow: false,
      // 头像id
      // avatarId: '',
      fileList: [
        {
          url: process.env.VUE_APP_URL + this.$store.state.userInfo.avatar
        }
      ]
    }
  },
  methods: {
    // 获取上传头像
    async afterRead (file) {
      file.status = 'uploading'
      file.message = '上传中...'
      this.isShow = true
      const res = await apiUpload(file.file)
      file.status = 'done'
      this.message = res.data[0].id
    },
    //   保存修改
    async save () {
      this.$toast.loading({
        duration: 0
      })
      // if (this.ed === 'nickname') {
      //   await apiEditInfo({ nickname: this.message })
      //
      // } else if (this.ed === 'intro') {
      //   await apiEditInfo({ intro: this.message })
      //
      // } else if (this.ed === 'avatar') {
      // await apiEditInfo({ [this.ed]: this.avatarId })
      // }
      // if (this.ed === 'avatar') {
      //   await apiEditInfo({ [this.ed]: this.avatarId })
      // } else {
      //   await apiEditInfo({ [this.ed]: this.message })
      // }
      await apiEditInfo({ [this.ed]: this.message })
      this.$toast.success('修改成功')
      this.$store.dispatch('setUserInfo')
      // this.$router.push('/info')
      this.$router.go(-1)
    }
  },

  created () {
    // 获取从哪里进来
    if (this.ed === 'nickname') {
      this.title = '修改昵称'
      this.message = this.userInfo.nickname
    } else if (this.ed === 'intro') {
      this.title = '修改个人简介'
      this.message = this.userInfo.intro
    } else if (this.ed === 'avatar') {
      this.title = '修改头像'
    } else if (this.ed === 'position') {
      this.title = '修改岗位'
      this.message = this.userInfo.position
    }
  }
}
</script>

<style lang="less" scoped>
.editInfo {
  font-size: 12px;
  /deep/.van-nav-bar__left {
    padding-left: 0px;
  }
  /deep/ .van-nav-bar__title {
    font-weight: 600;
    font-size: 18px;
  }
  .myicon {
    font-size: 50px;
  }
  .editBox {
    margin: 15px;
    text-align: center;
  }
}
</style>
